{% extends "base.html" %} {% load static %}
{% block title %} 登录 {% endblock title %}

{% block style %}
<style>
    /* 全局样式覆盖 */
    html, body {
        background: linear-gradient(135deg, #1a1a1a, #2a2a2a) !important;
        min-height: 100vh;
    }

    #wrapper {
        background: linear-gradient(135deg, #1a1a1a, #2a2a2a) !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: calc(100vh - 116px) !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #push {
        display: none !important; /* 完全移除 push 的影响 */
    }

    footer {
        background: linear-gradient(135deg, #1a1a1a, #2a2a2a) !important;
        margin-top: 0 !important;
    }

    .container {
        width: 100%;
        padding: 0 15px;
        margin: 0 auto;
    }

    .login-container {
        width: 100%;
        max-width: 500px;
        background: rgba(26, 26, 26, 0.8);
        border-radius: 15px;
        padding: 2.5rem;
        box-shadow: 0 0 30px rgba(0, 123, 255, 0.3);
        backdrop-filter: blur(10px);
        color: #fff;
        margin: 2rem auto;
    }

    .form-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 1.8rem;
    }

    .form-group label {
        align-self: flex-start;
        margin-left: 10%;
        margin-bottom: 0.5rem;
        color: #00bfff;
        font-size: 0.9rem;
        letter-spacing: 1px;
    }

    .form-control {
        width: 80%;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(0, 191, 255, 0.2);
        border-radius: 8px;
        padding: 12px;
        color: #fff !important;
        transition: all 0.3s ease;
    }

    .form-control:focus {
        background: rgba(255, 255, 255, 0.15);
        box-shadow: 0 0 15px rgba(0, 123, 255, 0.3);
        border-color: #00bfff;
    }

    .btn-primary {
        background: linear-gradient(45deg, #007bff, #00bfff);
        border: none;
        border-radius: 8px;
        padding: 12px 40px;
        font-size: 1.1rem;
        letter-spacing: 2px;
        transition: all 0.3s ease;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 123, 255, 0.4);
    }

    .neon-text {
        color: #00bfff;
        text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
        font-size: 1.8rem;
        letter-spacing: 2px;
        margin-bottom: 2rem;
    }

    .register-link {
        color: #00bfff;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .register-link:hover {
        text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
        color: #fff;
    }

    .form-control::placeholder {
        color: rgba(255, 255, 255, 0.5);
    }

    /* 确保页脚背景色一致 */
    .bg-dark {
        background: linear-gradient(135deg, #1a1a1a, #2a2a2a) !important;
    }

    /* 确保输入框在自动填充时保持样式 */
    .form-control:-webkit-autofill,
    .form-control:-webkit-autofill:hover,
    .form-control:-webkit-autofill:focus {
        -webkit-text-fill-color: #fff;
        -webkit-box-shadow: 0 0 0px 1000px rgba(26, 26, 26, 0.8) inset;
        transition: background-color 5000s ease-in-out 0s;
    }
</style>
{% endblock style %}

{% block content %}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="login-container">
                <h3 class="text-center neon-text">用户登录</h3>
                <div class="text-center mb-4">
                    <p>还没有账号？ 
                    <a href="{% url 'user:register' %}" class="register-link">立即注册</a></p>
                </div>
                <form method="post" action="{% url 'user:login' %}">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="username">账号</label>
                        <input type="text" class="form-control" id="username" name="username" 
                               placeholder="请输入您的账号">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" id="password" name="password" 
                               placeholder="请输入您的密码">
                    </div>
                    <div class="text-center">
                        <button type="submit" class="btn btn-primary">登 录</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock content %}